const { snapshotManager } = require('../../../../utils/snapshot')

const backImages = ['/static/images/back_2.svg', '/static/images/back.svg']
const forwardImages = ['/static/images/forward_2.svg', '/static/images/forward.svg']
const onEditColors = ['#333', '#bbb']

Component({
  properties: {
    width: {
      type: String,
      value: '100%'
    },
    height: {
      type: String,
      value: '100%'
    },
    isNew: {
      type: Boolean,
      value: false
    },
    isOnEdit: {
      type: Boolean,
      value: false
    },
    showFontStyleBar: {
      type: Boolean,
      value: false
    }
  },
  data: {
    width: '100%',
    height: '120rpx',
    maxHeight: '120rpx',
    isNew: false,
    isOnEdit: false,
    backEnable: false,
    forwardEnable: false,
    backEnableImage: backImages[1],
    forwardEnableImage: forwardImages[1],
    onEditColor: onEditColors[0],
    showFontStyleBar: false
  },
  lifetimes: {
    attached() {
      this.onPageShow()
      // if (!getApp().eventBus.hasEventName('onNoteShow')) {
      //   console.log('note-toolbar.js -> onNoteShow')
      //   getApp().eventBus.on('onNoteShow', this.onPageShow.bind(this))
      // }
    }
  },
  methods: {
    onPageShow() {
      this.setData({
        ...this.data,
        width: this.properties.width,
        height: this.properties.height,
        maxHeight: this.properties.height,
        isOnEdit: this.properties.isOnEdit
      })

      this.addSnapShotEventListener()
    },
    addSnapShotEventListener() {
      snapshotManager.on('add', (e) => {
        this.setButtonEnable()
      })
      snapshotManager.on('back', (e) => {
        this.setButtonEnable()
      })
      snapshotManager.on('forward', (e) => {
        this.setButtonEnable()
      })
    },
    setButtonEnable() {
      this.setData({
        ...this.data,
        isOnEdit: snapshotManager.hasSnapshot(),
        backEnable: !snapshotManager.isFirst(),
        forwardEnable: !snapshotManager.isEnd(),
        backEnableImage: snapshotManager.isFirst() ? backImages[1] : backImages[0],
        forwardEnableImage: snapshotManager.isEnd() ? forwardImages[1] : forwardImages[0],
        onEditColor: snapshotManager.hasSnapshot() ? onEditColors[0] : onEditColors[1]
      })
    },
    toggleFontStyleBar() {
      this.setData({
        showFontStyleBar: !this.data.showFontStyleBar
      })
    },
    cancel() {
      this.triggerEvent('cancel')
    },
    fontstyle() {
      this.toggleFontStyleBar()
      this.triggerEvent('fontstyle')
    },
    toggleFontWeight() {
      this.triggerEvent('toggle-font-weight')
    },
    toggleFontItalic() {
      this.triggerEvent('toggle-font-talic')
    },
    delete() {
      this.triggerEvent('delete')
    },
    picture() {
      this.triggerEvent('picture')
    },
    snapshotBack() {
      if (snapshotManager.isFirst()) return
      const snapshot = snapshotManager.back()
      
      this.triggerEvent('snapshot-back', { value: snapshot })
    },
    snapshotForward() {
      if (snapshotManager.isEnd()) return
      const snapshot = snapshotManager.forward()
      
      this.triggerEvent('snapshot-forward', { value: snapshot })
    },
    save() {
      this.triggerEvent('save')
    },
  }
})